<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui-v2.5.5/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div style="margin-left: 20px; margin-top: 10px;">
<font style="font-weight: bold;">角色授权</font><hr/></div>
<div id="test12" class="demo-tree-more" style="background-color: #FBFBFB; width: 550px; margin: 20px;"></div>
         
 <div class="layui-form-item" style="margin-left: 390px;">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn " lay-filter="add" lay-submit="">
                  授权
              </button>
          </div>
        
<script src="../layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util
  
  //模拟数据
  ,data = [{
    title: '检测者记录管理'
    ,id: 1
    ,field: 'name1'
    ,checked: true
    ,spread: false
    ,children: [{
      title: '检测者列表'
      ,id: 3
      ,field: 'name11'
      ,href: 'https://www.layui.com/'
    }]
  },{
    title: '报表管理'
    ,id: 2
    ,field: ''
    ,spread: false
    ,children: [{
      title: '检测指标统览'
      ,id: 5
      ,field: ''
      ,spread: true
     
    },{
      title: '指标异常率报表'
      ,id: 6
      ,field: ''
      ,spread: true
     
    },{
      title: '消费者数据图谱'
      ,id: 7
      ,field: ''
      ,spread: true
     
    },{
      title: '月度数据报表'
      ,id: 8
      ,field: ''
      ,spread: true
     
    },{
      title: '合格率分析'
      ,id: 9
      ,field: ''
      ,spread: true
     
    },{
      title: '检测记录报表'
      ,id: 10
      ,field: ''
      ,spread: true
     
    }]
  },{
    title: '连锁药店管理'
    ,id: 11
    ,field: ''
    ,children: [{
      title: '门店列表'
      ,id: 12
      ,field: ''
      ,fixed: true
     
    }]
  },{
    title: '系统账号管理'
    ,id: 13
    ,field: ''
    ,children: [{
      title: '系统账号列表'
      ,id: 14
      ,field: ''
      ,fixed: true
     
    }]
  },{
    title: '系统维护'
    ,id: 15
    ,field: ''
    ,children: [{
      title: '系统设置'
      ,id: 16
      ,field: ''
      ,fixed: true
     
    },{
      title: '菜单管理'
      ,id: 17
      ,field: ''
      ,fixed: true
     
    },{
      title: '分配角色权限'
      ,id: 18
      ,field: ''
      ,fixed: true
     
    }]
  },{
    title: '个人中心'
    ,id: 19
    ,field: ''
    ,children: [{
      title: '个人信息'
      ,id: 20
      ,field: ''
      ,fixed: true
     
    },{
      title: '修改密码'
      ,id: 21
      ,field: ''
      ,fixed: true
     
    }]
  }]
  
  //模拟数据1
  ,data1 = [{
    title: '江西'
    ,id: 1
    ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
        title: '青山湖区'
        ,id: 10001
      },{
        title: '高新区'
        ,id: 10002
      }]
    },{
      title: '九江'
      ,id: 1001
    },{
      title: '赣州'
      ,id: 1002
    }]
  },{
    title: '广西'
    ,id: 2
    ,children: [{
      title: '南宁'
      ,id: 2000
    },{
      title: '桂林'
      ,id: 2001
    }]
  },{
    title: '陕西'
    ,id: 3
    ,children: [{
      title: '西安'
      ,id: 3000
    },{
      title: '延安'
      ,id: 3001
    }]
  }]
  
  //模拟数据2
  ,data2 = [{
    title: '早餐'
    ,id: 1
    ,children: [{
      title: '油条'
      ,id: 5
    },{
      title: '包子'
      ,id: 6
    },{
      title: '豆浆'
      ,id: 7
    }]
  },{
    title: '午餐'
    ,id: 2
    ,checked: true
    ,children: [{
      title: '藜蒿炒腊肉'
      ,id: 8
    },{
      title: '西湖醋鱼'
      ,id: 9
    },{
      title: '小白菜'
      ,id: 10
    },{
      title: '海带排骨汤'
      ,id: 11
    }]
  },{
    title: '晚餐'
    ,id: 3
    ,children: [{
      title: '红烧肉'
      ,id: 12
      ,fixed: true
    },{
      title: '番茄炒蛋'
      ,id: 13
    }]
  },{
    title: '夜宵'
    ,id: 4
    ,children: [{
      title: '小龙虾'
      ,id: 14
      ,checked: true
    },{
      title: '香辣蟹'
      ,id: 15
      ,disabled: true
    },{
      title: '烤鱿鱼'
      ,id: 16
    }]
  }];
 
  //基本演示
  tree.render({
    elem: '#test12'
    ,data: data
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });
  
  //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
      
      layer.alert(JSON.stringify(checkedData), {shade:0});
      console.log(checkedData);
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {
        
      });
      
    }
  });
 
  //常规用法
  tree.render({
    elem: '#test1' //默认是点击节点可进行收缩
    ,data: data1
  });
  
  //无连接线风格
  tree.render({
    elem: '#test13'
    ,data: data1
    ,showLine: false  //是否开启连接线
  });
 
  //仅节点左侧图标控制收缩
  tree.render({
    elem: '#test2'
    ,data: data1
    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
  //手风琴模式
  tree.render({
    elem: '#test4'
    ,data: [{
      title: '优秀'
      ,children: [{
        title: '80 ~ 90'
      },{
        title: '90 ~ 100'
      }]
    },{
      title: '良好'
      ,children: [{
        title: '70 ~ 80'
      },{
        title: '60 ~ 70'
      }]
    },{
      title: '要努力奥'
      ,children: [{
        title: '0 ~ 60'
      }]
    }]
    ,accordion: true 
  });
 
  //点击节点新窗口跳转
  tree.render({
    elem: '#test5'
    ,data: data
    ,isJump: true  //link 为参数匹配
  });
 
  //开启复选框
  tree.render({
    elem: '#test7'
    ,data: data2
    ,showCheckbox: true
  });
 
  //开启节点操作图标
  tree.render({
    elem: '#test9'
    ,data: data1
    ,edit: ['add', 'update', 'del'] //操作节点的图标
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
});
</script>

</body>
</html>